import React, { Component } from 'react'
import { Menu } from 'antd'
import {mediator} from '@comm/mediator'
import {UserOutlined,TeamOutlined,UserSwitchOutlined,MonitorOutlined,ApartmentOutlined,
    AppstoreOutlined,SendOutlined,CodepenOutlined,UserAddOutlined,ToolOutlined,
    FileExcelOutlined,FileSearchOutlined,PullRequestOutlined,EnvironmentOutlined,MacCommandOutlined,
    MergeCellsOutlined,FolderOpenOutlined,PieChartOutlined,PrinterOutlined,BgColorsOutlined,FileWordOutlined,
    HomeOutlined,SoundOutlined} from '@ant-design/icons'
import '../style.scss'

interface IProps {
    menu: any[]
}
interface IState {
    activeMenu:string[],
    activeSubMenu:string[]
 }

// 定义一级菜单图标

const SubmenuIcon:any = {
    "user":<TeamOutlined/>,
    "role":<UserSwitchOutlined />,
    "power":<MonitorOutlined />,
    "root":<HomeOutlined />,
    "goods":<AppstoreOutlined />,
    "move":<SendOutlined />,
    "busi":<CodepenOutlined />,
    "dataview":<PrinterOutlined />,
}

// 定义二级菜单图标

const menuIcon:any = {
    "userManage":<UserOutlined />,
    "roleList":<UserAddOutlined />,
    "powerList":<ToolOutlined />,
    "menuList":<ApartmentOutlined />,
    "goodInfo":<FileExcelOutlined />,
    "goodSource":<FileSearchOutlined />,
    "goodProduct":<PullRequestOutlined />,
    "moveInfo":<EnvironmentOutlined />,
    "supplier":<MacCommandOutlined />,
    "distr":<MergeCellsOutlined />,
    "logInfo":<FolderOpenOutlined />,
    "sale":<PieChartOutlined />,
    "goodInspect":<PrinterOutlined />,
    "sgs":<BgColorsOutlined />,
    "recall":<FileWordOutlined />,
    "notice":<SoundOutlined/>,
    "flowchart":<FileExcelOutlined />,
}

export default class MenuM extends Component<IProps, IState> {
    constructor(props:IProps){
        super(props)
        this.state = {
            activeMenu:[""],
            activeSubMenu:[""]
        }
    }
    public openKeys = () => {
        mediator.on("openKey",(key:string)=>{
            this.setState({activeMenu:[key]})
            this.props.menu.forEach(items => {
                const num = items.children.findIndex((item:any) => item.code === key)
                if(num !== -1){
                    this.setState({activeSubMenu:[items.code]})
                    return 
                }
            })
        })
    }
    public componentDidMount(){
        this.openKeys()
    }
    public menuClick = (item:any) => {
        // console.log(item)
        item.comCode = item.code
        mediator.emit("createTab",item)
        this.setState({activeMenu:item.code})
    }
    public sunMenuClick = (item:any) => {
        if(item.code === this.state.activeSubMenu[0]){
            this.setState({activeSubMenu:[]})
        }else{
            this.setState({activeSubMenu:[item.code]})
        }
    }
    public renderMenuItem(item: any) {
        return (
            <Menu.Item  key={item.code} onClick={() => {this.menuClick(item)}} icon={menuIcon[item.code]}>
                {item.value}
            </Menu.Item>
        )
    }
    // 渲染一级菜单
    public renderSubMenu(items: any) {
        return (
            <Menu.SubMenu key={items.code} onTitleClick={() => this.sunMenuClick(items)} title={items.value} icon={SubmenuIcon[items.code]}
            >
                {items.children.map((item:any)=> {
                    return this.renderMenuItem(item)
                })}
            </Menu.SubMenu>
        )
    }
    public renderMenu() {
        const { menu } = this.props
        return (
            <Menu mode="inline" theme="dark" selectedKeys={this.state.activeMenu} openKeys={this.state.activeSubMenu}>
                {menu.map((item: any) => {
                    return this.renderSubMenu(item)
                })}
            </Menu>
        )
    }
    public render() {
        return (
            <React.Fragment>
                {this.renderMenu()}
            </React.Fragment>
        )
    }
}